<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <link rel="stylesheet" href="/stylesheets/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
  <!-- 引入组件库 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <title>后台管理系统</title>
</head>

<body class="indexBody">
  <div class="home-container" id="mainapp">
    <div class="layout-header-container d-flex justify-content-between align-items-center p-3">
      <!-- 左侧 logo 和 标题区域 -->
      <div class="layout-header-left d-flex align-items-center user-select-none">
        <!-- logo -->
        <img class="layout-header-left-img" :src="`${ this.user.user_img }`" alt="" />
        <!-- 标题 -->
        <h4 class="layout-header-left-title ml-3" v-cloak>
          {{ this.user.nickname }}后台管理系统
        </h4>
      </div>

      <!-- 右侧按钮区域 -->
      <div class="layout-header-right ">
        <button type="button" class="btn btn-light" @click="changePsw">
          修改密码
        </button>
        <button type="button" class="btn btn-light" @click="logout">
          退出登录
        </button>
      </div>
    </div>
    <div class="home-main-box">
      <div class="layout-aside-container">
        <!-- 左侧边栏列表 -->
        <ul class="user-select-none menu">
          <li class="menu-item actived" @click.prevent="switchTab($event,0)">
            <a href="">订单管理</a>
          </li>
          <li class="menu-item" @click.prevent="switchTab($event,1);upadetShow(1);">
            <a href="">商品管理</a>
          </li>
        </ul>
      </div>
      <div class="home-main-body" ref="tabcon" style="width: 100%;height:100%">
        <div v-show="tabnum===0">
          <h4 class="text-center">订单管理</h4>
          <template>
            <el-table :data="orderList" border style="background: transparent;" height="450" empty-text="暂时无数据，或者数据在加载中">
              <el-table-column align="center" prop="Id" label="#" width="50"></el-table-column>
              <el-table-column align="center" prop="nanoid" label="订单编号" width="220">
              </el-table-column>
              <el-table-column type="expand" prop="goodsList" label="商品详情" width="160">
                <template slot-scope="props">
                  <el-table :data='props.row.goodsList' style="z-index: 99; background: rgb(104, 117, 127)">
                    <el-table-column prop="id" label='商品名称'>
                      <template slot-scope="scope">
                        <span>{{getGoodsName(scope.row.id)}}</span>
                      </template>

                    </el-table-column>
                    <el-table-column prop="type" label='规格'>
                      <template slot-scope="scope">
                        <span>{{getType(scope.row.type)}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="price" label='价格'></el-table-column>
                    <el-table-column prop="selectedNum" label='数量'></el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="createdTime" label="下单时间"></el-table-column>
              <el-table-column align="center" prop="mealNum" label="取餐号"></el-table-column>
              <el-table-column align="center" prop="tableNum" label="桌号"></el-table-column>
              <el-table-column align="center" prop="Id" fixed="right" width="160" label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="deleteOrder(scope.row.Id)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <div v-show="tabnum===1" style="position: relative;">
          <button type="button" class=" btn btn-info" style="position: absolute;right: 15px;top: -8px"
            @click='addGood'>增加商品</button>
          <h4 class="text-center">商品管理</h4>
          <template v-if="showlist!==''">
            <el-table :data="showlist" border style="background: transparent;">
              <el-table-column align="center" prop="good_id" label="#" width="50"></el-table-column>
              <el-table-column align="center" prop="good_img" label="商品图片" width="180">
                <template slot-scope="prop">
                  <el-image style="height:50px" :src="prop.row.good_img" fit="fit"></el-image>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="good_name" label="商品名称"></el-table-column>
              <el-table-column align="center" prop="good_price.s" label="小份价格"></el-table-column>
              <el-table-column align="center" prop="good_price.n" label="正常价格"></el-table-column>
              <el-table-column align="center" prop="good_price.l" label="大份价格"></el-table-column>
              <el-table-column align="center" prop="good_category" label="类别">
                <template slot-scope="scope">
                  <span>{{getCategory(scope.row.good_category)}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" fixed="right" width="160" label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click.prevent=" updateGood(scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="deleteGood(scope.row.good_name)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <!-- ------------------  分页  ------------------ -->
          <div class="pagination justify-content-center" style="margin-top:20px">
            <el-pagination @current-change="handleCurrentChange" background :current-page.sync="currentPage"
              :page-size="5" layout="prev, pager, next" :total="listCount">
            </el-pagination>
          </div>

        </div>
      </div>
    </div>
    <!-- ------------------  弹出框  ------------------ -->
    <el-dialog title="更改商品" :visible.sync="dialogFormVisible" :close-on-click-modal='false' @close='dialogPassive'>
      <el-form :model="form" ref="goodsform">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="商品名称" :rules="rules.name" prop="name">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='16'>
            <el-form-item label="图片地址">
              <el-input v-model="form.img" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span='4'>
            <el-form-item label="小份价格" prop="s" :rules='rules.number'>
              <el-input v-model.number=" form.s" />
          </el-col>
          <el-col :span='4'>
            </el-form-item>
            <el-form-item label="正常价格" prop="n" :rules='rules.number'>
              <el-input v-model.number="form.n" />
            </el-form-item>
          </el-col>
          <el-col :span='4'>
            <el-form-item label="大份价格" prop="l" :rules='rules.number'>
              <el-input v-model.number="form.l" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品种类">
              <el-select v-model="form.category" placeholder="请选择更改的种类" style="width: 100%">
                <el-option :label="item.category" :value="item.id" v-for="item in categories" :key="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <button type="button" class="el-button el-button--primary" ref="dialogsSubumitBtn">
          <span>确定</span>
        </button>
      </div>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible2" width="30%" :close-on-click-modal='false'
      @close='resetForm("pswform")'>
      <el-form :model="pswform" status-icon :rules="rules" ref="pswform" label-width="100px">
        <el-form-item label="旧密码" prop="passold">
          <el-input type="password" v-model="pswform.passold" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="passnew">
          <el-input type="password" v-model="pswform.passnew" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkPassnew">
          <el-input type="password" v-model="pswform.checkPassnew" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('pswform')">提交</el-button>
          <el-button @click="resetForm('pswform')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="/javascripts/index.js"></script>
</body>

</html>